<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="LinkageSelect.js"></script>
<link href="common.css" rel="stylesheet"/>
<title>通用JavaScript联动下拉菜单</title>
</head>

<body>
<div id="header">
<h1>通用JavaScript联动下拉菜单</h1>
基于jQuery的联动下拉菜单
</div>

<div class="main">
<h2>Author</h2>
RayChou
[<a href="http://www.raychou.com">Website</a>]

<h2>Update</h2>
<ul>
	<li><strong>2010-02-06</strong><br />
	修复一个无法显示下级菜单的bug（感谢网友<strong>鸿飞雪泥</strong>的反馈）
	</li>
	
	<li><strong>2010-01-16</strong><br />
	新增Demo7 置顶外部表单元素<br />
	新增Demo8 自动隐藏和现实菜单
	</li>
	
	<li><strong>2009-05-14</strong><br />
	新增Demo6 AJAX调用数据</li>
	
	<li><strong>2009-04-25</strong><br />
	新增<a target="_blank" href="./data_builder/">DataBuilder</a> JSON数据生成工具</li>
	
	<li><strong>2009-04-24</strong><br />
	发布第一版</li>
</ul>

<h2>Download</h2>
<ul>
    <li>
        <a href="linkage-select.zip">linkage-select.zip</a>
		共下载 <script type="text/javascript" src="linkage-select.zip.count.js"></script> 次
    </li>
    <li>
        <a href="data_builder/data_builder.zip">data_builder.zip</a>
		共下载 <script type="text/javascript" src="data_builder/data_builder.zip.count.js"></script> 次
    </li>
</ul>


<h2>Tools</h2>
<ul>
  <li><a target="_blank" href="./data_builder/">DataBuilder</a></li>
</ul>

<h2>Demo</h2>

<div class="main">



<pre name="code" class="html">
<script type="text/javascript" src="location.js"></script>
</pre>


<h3><a name="demo1">Demo1：省市地三级联动</a></h3>

<div id="demo1">
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		data	: data
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo1 .level_1');
	sel.bind('#demo1 .level_2');
	sel.bind('#demo1 .level_3');
})
</script>
	
<pre name="code" class="js">
var options	= {
	data	: data	// data变量数据从location.js得来
}

var sel = new LinkageSelect(options);
sel.bind('#demo1 .level_1');
sel.bind('#demo1 .level_2');
sel.bind('#demo1 .level_3');
</pre>


<h3><a name="demo2">Demo2：设置默认值</a></h3>

<div id="demo2">
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		data	: data
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo2 .level_1' , '1');
	sel.bind('#demo2 .level_2' , '2');
	sel.bind('#demo2 .level_3');
})
</script>	


<pre name="code" class="js">
var options	= {
	data	: data
}

var sel = new LinkageSelect(options);
sel.bind('#demo2 .level_1' , '1');
sel.bind('#demo2 .level_2' , '2');
sel.bind('#demo2 .level_3');
</pre>


<h3><a name="demo3">Demo3：自定义选择范围</a></h3>

<div id="demo3">
	北京市
	<select class="level_1" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		data	: data,
		root	: '0,1,2'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo3 .level_1');
})
</script>

<pre name="code" class="js">
var options	= {
	data	: data,
	root	: '0,1,2'
}

var sel = new LinkageSelect(options);
sel.bind('#demo3 .level_1');
</pre>


<h3><a name="demo4">Demo4：调用外部JSON</a> （一次取出所有数据，不适合数据量大的情况）<a target="_blank" href="./data_builder/">DataBuilder</a></h3>

<div id="demo4">
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		file	:	'./data_builder/json.php'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo4 .level_1');
	sel.bind('#demo4 .level_2');
	sel.bind('#demo4 .level_3');
})
</script>	

<pre name="code" class="js">
var options	= {
	file	:	'./data_builder/json.php'
}

var sel = new LinkageSelect(options);
sel.bind('#demo4 .level_1');
sel.bind('#demo4 .level_2');
sel.bind('#demo4 .level_3');
</pre>


<h3><a name="demo5">Demo5：动态加载菜单</a></h3>

<div id="demo5">
	<a href="javascript:select1();">地区菜单</a>
	<a href="javascript:select2();">自定义菜单</a><br />
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
</div>

<script type="text/javascript">
function select1() {
	var options	= {
		data	:	data
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo5 .level_1');
	sel.bind('#demo5 .level_2');
	sel.bind('#demo5 .level_3');
}

function select2() {
	var options	= {
		file	:	'./data_builder/json.php'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo5 .level_1');
	sel.bind('#demo5 .level_2');
	sel.bind('#demo5 .level_3');
}
</script>	


<pre name="code" class="js">
function select1() {
	var options	= {
		data	:	data
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo5 .level_1');
	sel.bind('#demo5 .level_2');
	sel.bind('#demo5 .level_3');
}

function select2() {
	var options	= {
		file	:	'./data_builder/json.php'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo5 .level_1');
	sel.bind('#demo5 .level_2');
	sel.bind('#demo5 .level_3');
}
</pre>




<h3><a name="demo6">Demo6：Ajax调用数据</a>（根据所选项，动态取下级菜单，速度快，有缓存）</h3>

<div id="demo6">
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		ajax	:	'./data_builder/ajax.php'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo6 .level_1' , '2');
	sel.bind('#demo6 .level_2');
	sel.bind('#demo6 .level_3');
})
</script>	


<pre name="code" class="js">
var options	= {
	ajax	:	'./data_builder/ajax.php'
}

var sel = new LinkageSelect(options);
sel.bind('#demo6 .level_1' , '2');
sel.bind('#demo6 .level_2');
sel.bind('#demo6 .level_3');
</pre>





<h3><a name="demo7">Demo7：置顶外部表单元素</a></h3>

<div id="demo7">
	<select class="level_1" style="width:120px;"></select>
	<select class="level_2" style="width:120px;"></select>
	<select class="level_3" style="width:120px;"></select>
	<br />
	所选项的值：<input name="demo7_field">
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		ajax		:	'./data_builder/ajax.php',
		field_name	:	'[name=demo7_field]'
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo7 .level_1');
	sel.bind('#demo7 .level_2');
	sel.bind('#demo7 .level_3');
})
</script>	


<pre name="code" class="js">
var options	= {
	ajax		:	'./data_builder/ajax.php',
	field_name	:	'[name=demo7_field]'
}

var sel = new LinkageSelect(options);
sel.bind('#demo7 .level_1');
sel.bind('#demo7 .level_2');
sel.bind('#demo7 .level_3');
</pre>





<h3><a name="demo8">Demo8：自动显示隐藏选单项</a></h3>

<div id="demo8">
	<select class="level_1" style="width:120px;"></select>
</div>

<script type="text/javascript">
$(function() {
	var options	= {
		ajax	:	'./data_builder/ajax.php',
		auto	: true
	}
	
	var sel = new LinkageSelect(options);
	sel.bind('#demo8 .level_1');
})
</script>	


<pre name="code" class="js">
var options	= {
	ajax	:	'./data_builder/ajax.php',
	auto	: true
}

var sel = new LinkageSelect(options);
sel.bind('#demo8 .level_1');
</pre>


</div>

</div>


<link type="text/css" rel="stylesheet" href="../common/syntaxhighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="../common/syntaxhighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="../common/syntaxhighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="../common/syntaxhighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8822947-1");
pageTracker._trackPageview();
} catch(err) {}</script>


</body>
</html>
